{extend name="index/base" /}
{block name="content"}
<blockquote class="layui-elem-quote fhui-admin-main_hd">
    <h2>用户组列表</h2>
</blockquote>

<div class="y-role">
    <!--工具栏-->
    <div id="floatHead" class="toolbar-wrap">
        <div class="toolbar">
            <div class="box-wrap">
                <a class="menu-btn"></a>
                <div class="l-list">
                    <a class="layui-btn layui-btn-sm do-action" data-type="doAdd" href="javascript:void(0);"
                       lay-event="edit" id="doAdd1"><i class="fa fa-plus"></i>新增</a>
                    <a class="layui-btn layui-btn-sm do-action" onclick="window.location.reload()"><i
                            class="fa fa-refresh fa-spin"></i>刷新</a>
                </div>
            </div>
        </div>
    </div>
    <!--/工具栏-->
    <!--文字列表-->
    <div class="fhui-admin-table-container">
        <table id="table1" lay-filter="table1"></table>
    </div>
</div>
<!--添加用户组开始-->
<div id="add_group" class="layui-hide">
    <form class="layui-form" style="padding-top: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">用户组名称</label>
            <div class="layui-input-inline">
                <input type="text" name="title" placeholder="用户组名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-inline">
                <input type="radio" name="status" value="1" title="启用" checked>
                <input type="radio" name="status" value="0" title="不启用">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="add_submit">立即提交</button>
            </div>
        </div>
    </form>
</div>
<!--添加用户组结束-->

<!--编辑用户组开始-->
<div id="edit_group" class="layui-hide">
    <form class="layui-form" lay-filter="edit_form" style="padding-top: 20px;">
        <input type="hidden" name="id" value="">
        <div class="layui-form-item">
            <label class="layui-form-label">用户组名称</label>
            <div class="layui-input-inline">
                <input type="text" name="title" placeholder="用户组名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-inline">
                <input type="radio" name="status" value="1" title="启用">
                <input type="radio" name="status" value="0" title="不启用">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="edit_submit">立即提交</button>
            </div>
        </div>
    </form>
</div>
<!--编辑用户组结束-->
<script type="text/html" id="barDemo">
    {{# if(d.id!=1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{# } }}
</script>
<script type="text/html" id="config">
    <a href="{:url('groupAccess')}?id={{d.id}}" class="layui-btn layui-btn-xs">配置规则</a>
</script>

<script type="text/html" id="is_status">
    {{#  if(d.status == 1){ }}
    <a>启用</a>
    {{# }else{  }}
    <a>禁用</a>
    {{#  } }}
</script>

{/block}
{block name="js"}
<script type="text/javascript">
    layui.use(['table', 'jquery', 'form'], function () {
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;
        var token = layui.sessionData('token').token;
        var inittable = table.render({
            elem: '#table1'
            // ,height: 'full-20'
            , url: '{:url("groups")}?token=' + token //数据接口
            , page: true //开启分页
            , limit: 20
            , cols: [[
                {field: 'id', title: 'ID', width: 80, fixed: 'left'}
                , {field: 'title', title: '用户组名称'}
                , {field: 'status', title: '是否启用', toolbar: '#is_status'}
                , {fixed: 'right', 'title': '配置规则', align: 'center', toolbar: '#config'}
                , {fixed: 'right', 'title': '操作', align: 'center', toolbar: '#barDemo'}
            ]]
        });
        // 编辑和删除
        table.on('tool(table1)', function (obj) {
            var data = obj.data; //获得当前行数据

            if (obj.event === 'edit') {
                $('#edit_group input[name=status][value=' + data.status + ']').prop('checked', true);
                form.val("edit_form", data);
                var edit = layer.open({
                    type: 1,
                    title: '添加用户组',
                    area: ['500px', '250px'],
                    shade: 0.6,
                    scrollbar: true,
                    content: $('#edit_group'),
                    success: function () {
                        $("#edit_group").removeClass("layui-hide");
                    },
                    cancel: function () {
                        $("#edit_group").addClass("layui-hide"); //移除
                    }
                });
            } else if (obj.event === 'del') {
                layer.confirm('您确定要删除该用户组吗？', function (index) {
                    var loading = layer.load(1, {shade: [0.1, '#fff']});
                    $.post("{:url('delGroup')}", {id: data.id, token: token}, function (res) {
                        layer.close(loading);
                        if (res.code === 0) {
                            layer.msg(res.msg, {time: 1000, icon: 1});
                            obj.del();
                        } else {
                            layer.msg('操作失败！', {time: 1000, icon: 2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
        //刷新
        $('#reload_btn').click(function () {
            var keywords = $('#keywords').val();
            inittable.reload({
                where: {
                    keywords: keywords
                },
                page: {
                    curr: 1
                }
            })
        });
        //添加用户组弹窗
        $("#doAdd1").click(function () {
            var open2 = layer.open({
                type: 1,
                title: '添加用户组',
                area: ['500px', '300px'],
                shade: 0.6,
                scrollbar: true,
                content: $('#add_group'),
                success: function () {
                    $("#add_group").removeClass("layui-hide"); //移除
                },
                cancel: function () {
                    $("#add_group").addClass("layui-hide"); //移除
                }
            });
        })
        //添加用户组发送请求
        var add = form.on('submit(add_submit)', function (data) {
            console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post("{:url('addGroup')}?token=" + token, data.field, function (res) {
                layer.close(loading);
                if (res.code == 0) {
                    layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                        //layer.close(open2);
                        inittable.reload();
                    });
                } else {
                    layer.msg(res.msg, {time: 1800, icon: 2});
                }
            });
        });
        //编辑用户组发送请求
        var edit = form.on('submit(edit_submit)', function (data) {
            console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post("{:url('editGroup')}?token=" + token, data.field, function (res) {
                layer.close(loading);
                if (res.code == 0) {
                    layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                        inittable.reload();
                    });
                } else {
                    layer.msg(res.msg, {time: 1800, icon: 2});
                }
            });
        });
    });
</script>
{/block}